<template>
	<view class="content">
		 <!-- 标题部分 -->
		<view class="login_from_input">
			<view class="form-left">需求名称</view>
			<view class="login_from_fun"><input type="text" v-model="formData.name" placeholder="请输入需求名称" ></view>
		</view>
		<view class="login_from_input">
			<view class="form-left">需求类型</view>
			<view class="login_from_fun">
				<picker style="width: 100%;" @change="typeChange" :value="typeIndex"  :range-key="'dictLabel'" :range="typeArray">
					<view style="font-size: 32rpx; float:left;" class="uni-input">{{typeArray[typeIndex].dictLabel || '请选择需求类型'}}</view>
				</picker>
			</view>
		</view>
		<view class="login_from_input">
			<view class="form-left">投资预算</view>
			<view class="login_from_fun"><input type="text" v-model="formData.tzys" placeholder="请输入投资预算" ></view>
		</view>
		<view class="login_from_input">
			<view class="form-left">企业名称</view>
			<view class="login_from_fun"><input type="text" v-model="formData.companyName" placeholder="请输入企业名称" ></view>
		</view>
		<view class="login_from_input">
			<view class="form-left">联系人</view>
			<view class="login_from_fun"><input type="text" v-model="formData.contactPerson" placeholder="请输入联系人" ></view>
		</view>
		<view class="login_from_input">
			<view class="form-left">联系电话</view>
			<view class="login_from_fun"><input type="number" maxlength="11" v-model="formData.phone" placeholder="请输入联系电话"></view>
		</view>
		<view class="detail">
			<view class="login_from_input">
				<view class="form-left">所在城市</view>
				<view class="login_from_fun">
					<picker style="width: 100%;" @change="cityChange" :value="cityIndex"  :range-key="'dictLabel'" :range="cityArray">
						<view style="font-size: 32rpx; float:left;" class="uni-input">{{cityArray[cityIndex].dictLabel || '请选择所在城市'}}</view>
					</picker>
				</view>
			</view>
			<view class="login_from_input">
				<view class="form-left">合作方式</view>
				<view class="login_from_fun">
					<picker style="width: 100%;" @change="cooperationChange" :value="cooperationIndex"  :range-key="'dictLabel'" :range="cooperationArray">
						<view style="font-size: 32rpx; float:left;" class="uni-input">{{cooperationArray[cooperationIndex].dictLabel || '请选择合作方式'}}</view>
					</picker>
				</view>
			</view>
			<view class="login_from_input">
				<view class="form-left">紧急程度</view>
				<view class="login_from_fun">
					<picker style="width: 100%;" @change="emergencyChange" :value="emergencyIndex"  :range-key="'dictLabel'" :range="emergencyArray">
						<view style="font-size: 32rpx; float:left;" class="uni-input">{{emergencyArray[emergencyIndex].dictLabel || '请选择紧急程度'}}</view>
					</picker>
				</view>
			</view>
			<view class="login_from_input">
				<view class="form-left">截止时间</view>
				<view class="login_from_fun">
					<picker style="width: 100%;" mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view style="font-size: 32rpx; float:left;">{{ date || '请选择截止时间' }}</view>
					</picker>
				</view>
			</view>
			<view class="login_from_input">
				<view class="form-left">详细描述</view>
				<view class="login_from_fun">
					<!-- <input type="text" style="height: 400rpx;  white-space:normal; word-break:break-all; word-warp:break-word;" v-model="formData.description" placeholder="请输入需求描述"> -->
					<textarea v-model="formData.detail" placeholder="请输入需求详细描述"></textarea>
				</view>		
			</view>
		</view>
		<view class="uni-form-item uni-column">
			<view style="margin-bottom: 35rpx;">
				<button type="primary" @click="submitNeeds()">提交</button>
			</view>
		</view>
		<uni-popup v-if="canlendarShow">
			<tmt-calendar defaultDate="2021-11-03" :point-list="['2022-03-20','2022-04-01','2022-04-02','2022-04-05']"   show="canlendarShow" @changeDate="changeDate(e)"></tmt-calendar>
		</uni-popup>
	</view>
</template>

<script>
	import * as mydata from '@/api/system/dict/data.js'
	import * as needs from '@/api/personCenter/NEED'
	
	function getDate(type) {
		const date = new Date();
	 
		let year = date.getFullYear();
		let month = date.getMonth() + 1;
		let day = date.getDate();
	 
		if (type === 'start') {
			year = year - 10;
		} else if (type === 'end') {
			year = year + 10;
		}
		month = month > 9 ? month : '0' + month;
		day = day > 9 ? day : '0' + day;
	 
		return `${year}-${month}-${day}`;
	}
	
	export default {
			data() {
				return {
					show: false,
					token:'',
					formData: {
						memberId:'',
						name:'',
						companyName:'',
						contactPerson:'',
						phone:'',
						type:'',
						detail: '',
						deadline:'',
						jjcd:'',
						tzys:'',
						hzfs:'',
						city:'',
					},
					srcs: [],
					execId: 0,
					taskId: '',
					hasDescription: false,
					companyTypeList:[],
					fieldList:[],
					commandTypeList:[
						{id:'0',name:''}
					],
					imageStyles:{
						width:64,
						height:64,
						border:{
							color:"#888888",
							width:2,
							style:'dashed',
							radius:'2px'
						}
					},
					canlendarShow:false,
					//需求类型
					typeArray: [
					],
					//需求类型选中项
					typeIndex: null,
					//合作类型
					cooperationArray: [
					],
					//合作类型选中项
					cooperationIndex: null,
					//紧急类型
					emergencyArray: [
					],
					//合作类型选中项
					emergencyIndex: null,
					//紧急类型
					cityArray: [
					],
					//合作类型选中项
					cityIndex: null,
					//截止时间选择相关
					date: null,
					startDate: getDate('start'),
					endDate: getDate('end'),
				}
			},
			onLoad() {
				this.getCityList();
				this.getUser()
			},
			methods:{
				getUser(){
					const value = uni.getStorageSync("userInfo") || []
					if(value.login_user == null){
						uni.redirectTo({
							url:'/subpages/pages/register/login_province'
						})
						uni.showToast({
							icon:'none',
							title:'请先登录！'
						})
					}else{
						this.token = value.access_token
						this.formData.memberId = value.login_user.member.id
					}	
					
				},
				getCityList(){
					mydata.getDicts("bus_city").then((response) => {
					  this.cityArray = response.data;
					});
					mydata.getDicts("bus_need_type").then((response) => {
					  this.typeArray = response.data;
					});
					mydata.getDicts("cms_approve_status").then((response) => {
					  this.statusList = response.data;
					});
					mydata.getDicts("bus_need_level").then((response) => {
					  this.emergencyArray = response.data;
					});
					mydata.getDicts("bus_need_way").then((response) => {
					  this.cooperationArray = response.data;
					});
				},
				selectPics(){
					var that = this;
					uni.chooseImage({
						count: 3,
						success: (res) => {
							const files = res.tempFiles;
							let imgArr = [];
							for (let i = 0; i < files.length; i++) {
								let obj = new Object();
								obj.name = 'photo'+i;
								obj.uri = files[i].path;
								that.fileList.push(obj);
							}
						}
					})
				},
				submitNeeds(){
					this.formData .deadline = this.date
					this.formData.jjcd = this.emergencyArray[this.emergencyIndex].dictValue
					this.formData.hzfs = this.cooperationArray[this.cooperationIndex].dictValue
					this.formData.type = this.typeArray[this.typeIndex].dictValue
					this.formData.city = this.cityArray[this.cityIndex].dictValue
					if(this.formData.name == ''){
						uni.showToast({
							icon:'none',
							title:'需求名称不能为空！'
						})
					}else if(this.formData.companyName == ''){
						uni.showToast({
							icon:'none',
							title:'企业名称不能为空！'
						})
					}else if(this.formData.companyName == ''){
						uni.showToast({
							icon:'none',
							title:'企业名称不能为空！'
						})
					}else if(this.formData.contactPerson == ''){
						uni.showToast({
							icon:'none',
							title:'联系人不能为空！'
						})
					}else if(this.formData.phone == ''){
						uni.showToast({
							icon:'none',
							title:'联系电话不能为空！'
						})
					}else if(this.formData.type == ''){
						uni.showToast({
							icon:'none',
							title:'需求类型不能为空！'
						})
					}else{
						needs.addNEED(this.formData).then((res)=>{
							if(res.code == '200'){
								uni.navigateTo({
									url:'/subpages/pages/intelligentMatch/index?need=' + encodeURIComponent(JSON.stringify(this.formData))
								})
							}
						});
					}
				},
				changeDate(e){
					this.canlendarShow = false;
					var year =  e.year 
					var month = e.month
					if(month < 10){
						month = "0" + month
					}
					var day = e.day
					if(day < 10){
						day = "0" + month
					}
					
					this.formData.deadline = year + '-' + month + '-' + day
				},
				cooperationChange(e){
					this.cooperationIndex = e.target.value;
					this.formData.hzfs = this.cooperationArray[this.cooperationIndex].dictValue;
				},
				typeChange(e){
					this.typeIndex = e.target.value;
					this.formData.type = this.typeArray[this.typeIndex].dictValue;
				},
				cityChange(e){
					this.cityIndex = e.target.value;
					this.formData.city = this.cityArray[this.cityIndex].dictValue;
				},
				bindDateChange(e) {
					this.formData.deadline = e.detail.value;
					this.date = e.detail.value;
				},
				emergencyChange(e){
					this.emergencyIndex = e.target.value;
					this.formData.jjcd = this.typeArray[this.typeIndex].dictValue;
				}
			}
	}
</script>

<style>
	.content{
		height: 500rpx;
		background-color: #e5e5e5;
		padding-bottom: 20rpx;
	}
	
	.uni-form-item {
		margin: 60rpx 30rpx;
		border-radius: 50px;
		}
		
	.uni-form-item button{
		background-color: #016fb8;
		height: 90rpx;
		font-size: 35rpx;
		margin-top: 350rpx;
	}
	
	.login_from_input{
		width: 100%; 
		height:auto; 
		display: flex; 
		flex-direction: row; 
		justify-content: space-between; 
		align-items: center; 
		border-bottom: 1px #eee solid; 
		padding: 20upx 0px; 
		margin: 0px auto; 
		background-color: #fff;
	} 
	
	.login_from_name{
		width: 30%; 
		margin-left: 40rpx;
		font-size: 30rpx;
	}
	.login_from_fun{ 
		width: 70%; 
		display: flex; 
		flex-direction: row; 
		justify-content: flex-end; 
		text-align: right;  
	}
	
	.login_from_fun input{ 
		width: 100%; 
		text-align: left; 
		font-size: 14px;  
	}
	
	.detail{
		background-color: #fff;
		margin-top: 25rpx;
		height: 400rpx;
	}
	
	.form-left{
		margin-left: 16px;
		padding:5rpx 0;
	}
	
	.form-right{
		margin-top: 6px;
		margin-left: 6px;
		padding:5px 0;
		width: 90%;
		border: 1px solid #D8D8D8;
		border-radius: 3px;
	}

	.upLoadImg{
		width: 96rpx;
		height: 96rpx;
		background-color: #FFFFFF;
		margin-top: 16rpx;
		margin-left: 6px;
	}
	
	.devideline {
		float: left; 
		height: 0.3rpx;
		width:100%;
		background-color: #eeeeee;
		margin-top: 25rpx;
		margin-bottom: 15rpx;
	}
	
	textarea {
	        margin-right: 20rpx;
	        height: 300rpx;
	        word-wrap : break-word;
			text-align: left;
			font-size: 15px;
			
	    }
</style>